<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable vue/no-side-effects-in-computed-properties -->
<!-- eslint-disable vue/no-side-effects-in-computed-properties -->
<!-- 横向布局 -->
<template>
	<el-container class="layout">
		<el-header class="shadow-sm">
			<div class="logo flex pl-4 items-center">
				<img :src="sysLogo()" alt="logo" />
				<span>{{ sysTitle() }}</span>
			</div>
			<el-menu mode="horizontal" :default-active="activeMenuParent" :router="false" :unique-opened="true" text-color="#000">
				<!-- 只有在这里写 submenu 才能触发 menu 三个点省略 -->
				<template v-for="menu in menuList" :key="menu.path">
					<el-menu-item :index="menu.path" @click="() => handleClickMenu(menu)">
						<i :class="`iconfont ${menu.meta.icon || 'iconlayout'} pl-1 pr-3`"></i>
						<template #title>
							<span class="pr-2">{{ menu.meta.title }}</span>
						</template>
					</el-menu-item>
				</template>
			</el-menu>
			<ToolBarRight />
		</el-header>
		<el-container class="three-content">
			<el-aside v-if="leftMenuList.length > 1">
				<div class="mini-bar">
					<CollapseIcon id="collapseIcon" />
				</div>
				<div class="menu" :style="{ width: isCollapse ? '65px' : '210px', height: 'calc(100% - 40px)' }">
					<el-scrollbar>
						<el-menu
							:default-active="activeMenu"
							:router="false"
							:collapse="isCollapse"
							:collapse-transition="false"
							:unique-opened="true"
							text-color="#333"
						>
							<SubMenu :menuList="leftMenuList" />
						</el-menu>
					</el-scrollbar>
					<div class="position pb-4 text-center text-gray-400">Version: {{ version() }}</div>
				</div>
			</el-aside>
			<el-container class="three-main">
				<Main />
			</el-container>
		</el-container>
	</el-container>
</template>

<script setup lang="ts" name="LayoutThree">
import { computed, ComputedRef, ref } from "vue";
import { AuthStore } from "@/stores/modules/auth";
import { useRoute, useRouter } from "vue-router";
import { sysTitle, sysLogo, version } from "@/hooks/useSystem";
import Main from "@/layouts/components/Main/index.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import CollapseIcon from "@/layouts/components/Header/components/CollapseIcon.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import { GlobalStore } from "@/stores";
import mittBus from "@/utils/mittBus";
import { RouterPath } from "@/enums/routerPath";

const route = useRoute();
const router = useRouter();
const authStore = AuthStore();
const globalStore = GlobalStore();
const routeList = authStore.showMenuListGet || [];
const flatMenuList = authStore.flatMenuListGet || [];
const menuList = computed(() => routeList);
let currParentMenu = ref<any>({});
let leftMenuList = ref<Menu.MenuOptions[]>([]);
const activeMenu: ComputedRef = computed(() => {
	if (route.meta.activeMenu) {
		return route.meta.activeMenu;
	}

	//获取上级菜单选中
	// let m = flatMenuList.find(item => item.path == route.path);
	// let p = flatMenuList.find(item => item.meta.id == m?.meta.pid);
	// if (p?.meta?.pid != "0") {
	// 	console.log(route.path, p?.path || m?.path);
	// 	return p?.path || m?.path;
	// }
	return route.path;
});
const activeMenuParent = ref();
onMounted(() => {
	activeMenuParent.value = initHeaderActive();
	mittBus.on("tabMenuClick", () => {
		let id = route.meta.pid;
		let header: any = menuList.value.find(item => item.meta.id == id);
		if (header) {
			activeMenuParent.value = header.path;
			leftMenuList.value = header.children;
			currParentMenu.value = header;
		}
	});
	mittBus.on(RouterPath.serviceAuth, () => {
		router.push(RouterPath.serviceAuth);
		activeMenuParent.value = "/basic/user";
		let header: any = menuList.value.find(item => item.meta.id == "system");
		leftMenuList.value = header.children;
		currParentMenu.value = header;
	});
});

onBeforeUnmount(() => {
	mittBus.off(RouterPath.serviceAuth);
	mittBus.off("tabMenuClick");
});
const initHeaderActive = () => {
	let active;
	if (!currParentMenu.value.path) {
		let page = flatMenuList.find(item => item.path == activeMenu.value);
		if (!page) {
			return;
		}
		//激活当前顶部菜单
		let parent: any = page;
		while (parent?.meta?.pid != "0") {
			parent = flatMenuList.find(item => item.meta.id == parent!.meta?.pid);
		}
		let header: any = menuList.value.find(item => item.meta.id == parent.meta.id);
		if (!header) {
			return;
		}
		active = parent?.path || page.path;

		//刷新页面，不需要自动定位子页面，使用route页面即可
		handleClickMenu(header, true);
	} else {
		active = currParentMenu.value.path;
	}
	return active;
};
const handleClickMenu = (headerItem: Menu.MenuOptions, fixedPage?: boolean) => {
	activeMenuParent.value = headerItem.path;
	currParentMenu.value = headerItem;
	leftMenuList.value = headerItem.children || [];
	if (!leftMenuList.value.length) {
		router.push(headerItem.path);
		return;
	} else if (leftMenuList.value.length == 1) {
		router.push(leftMenuList.value[0].path);
		return;
	}
	if (!fixedPage) {
		router.push(leftMenuList.value[0].path);
	}
};
const isCollapse = computed(() => globalStore.themeConfig.isCollapse);
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>

<style lang="scss">
.three {
	.three-content {
		height: calc(100% - 55px); // 减去头部高度
		.three-main {
			display: flex;
			flex-direction: column;
		}
	}

	// guide
	#driver-highlighted-element-stage {
		background-color: #606266 !important;
	}
}
</style>
